<template>
  <div>
    <el-dialog
      :title="titleType"
      width="900px"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div class="dialogBody">
        <el-form
          :model="params"
          :rules="rules"
          ref="ruleForm"
          label-position="right"
          label-width="122px"
          size="small"
        >
          <el-form-item label="场馆名称：" prop="name">
            <el-input v-model="params.name" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="场馆类型：" prop="type">
            <el-select v-model="params.type" placeholder="场馆类型">
              <el-option label="会议室" :value="1"></el-option>
              <el-option label="活动室" :value="2"></el-option>
              <el-option label="演艺厅" :value="3"></el-option>
              <el-option label="服务中心" :value="4"></el-option>
              <el-option label="其他" :value="5"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="场馆地址：" prop="address">
            <el-input v-model="params.address" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="场馆面积：" prop="area">
            <el-input v-model="params.area" placeholder="请输入">
              <template slot="append"> 平方 </template>
            </el-input>
          </el-form-item>
          <el-form-item label="场馆照片:" prop="facade_img">
            <UploadPhoto
              @onSuccess="onSuccess"
              :fileList="params.facade_img"
            ></UploadPhoto>
          </el-form-item>
          <el-form-item label="联系人：" prop="contacter">
            <el-input
              v-model="params.contacter"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话：" prop="contact_phone">
            <el-input
              oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
              v-model="params.contact_phone"
              @blur="params.contact_phone = $event.target.value"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="场馆开放时间：" prop="open_time">
            <el-time-picker
              is-range
              v-model="params.open_time"
              value-format="HH:mm:ss"
              range-separator="~"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择场馆开放时间"
            >
            </el-time-picker>
          </el-form-item>
          <el-form-item label="最高容纳人数：" prop="people_num">
            <el-input
              oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
              v-model="params.people_num"
              @blur="params.people_num = $event.target.value"
              placeholder="请输入"
            >
              <template slot="append"> 人 </template>
            </el-input>
          </el-form-item>
          <el-form-item label="预约积分/次：" prop="score">
            <el-input
              oninput="value=value.replace(/[^\d]/g, '').replace(/(\d*)(\.?)(\d*).*/, '$1')"
              v-model="params.score"
              @blur="params.score = $event.target.value"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否需要审核：" prop="is_review">
            <el-select v-model="params.is_review" placeholder="场馆类型">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="温馨提示：" prop="warning">
            <el-input
              type="textarea"
              v-model="params.warning"
              :autosize="{ minRows: 4 }"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('ruleForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import UploadPhoto from "@/components/UploadPhoto.vue";

import { addVenue, editVenue } from "@/api/venue.js";

export default {
  name: "",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    venueInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      titleType: "新增",
      params: {
        name: "",
        type: "",
        address: "",
        area: "",
        facade_img: [],
        contacter: "",
        contact_phone: "",
        open_time: ["00:00", "00:00"],
        people_num: "",
        score: "",
        is_review: "",
        warning: "",
      },
      userInfo: {
        house: {},
      },
      rules: {
        name: [{ required: true, message: "请输入社团名称", trigger: "blur" }],
        type: [
          { required: true, message: "请选择场馆类型", trigger: "change" },
        ],
        address: [
          { required: true, message: "请输入场馆地址", trigger: "blur" },
        ],
        area: [{ required: true, message: "请输入场馆面积", trigger: "blur" }],
        facade_img: [
          { required: true, message: "请上传场馆照片", trigger: "change" },
        ],
        contacter: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contact_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式不正确",
            trigger: "blur",
          },
        ],
        open_time: [
          {
            required: true,
            message: "请选择场馆开放时间",
            trigger: "change",
          },
        ],
        people_num: [
          { required: true, message: "请输入最高容纳人数", trigger: "blur" },
        ],
        score: [{ required: true, message: "请输入预约积分", trigger: "blur" }],
        is_review: [
          { required: true, message: "请选择审核类型", trigger: "change" },
        ],
        warning: [
          { required: false, message: "请输入温馨提示", trigger: "blur" },
        ],
      },
    };
  },

  components: {
    UploadPhoto,
  },

  computed: {},

  beforeMount() {},

  mounted() {
    console.log(">>>>", this.venueInfo);
    if (Object.keys(this.venueInfo).length != 0) {
      let datas = JSON.parse(JSON.stringify(this.venueInfo));
      this.titleType = "编辑";
      this.params = datas;
      this.params.open_time = datas.open_time.split("-");
      this.params.facade_img = datas.facade_img.split(",").map((item) => {
        return {
          name: "",
          url: item,
        };
      });
    }
    console.log(this.params);
  },

  methods: {
    // getInfo() {
    //   clubDetail({ id: this.clubId }).then((res) => {
    //     if (res.code == 200) {
    //       this.params.name = res.data.name;
    //       this.params.introduction = res.data.introduction;
    //       this.params.userName = res.data.userName;
    //       this.params.uid = res.data.organizer_uid;
    //       this.params.pic = res.data.pic.split(",").map((item) => {
    //         return {
    //           name: "",
    //           url: item,
    //         };
    //       });
    //     }
    //   });
    // },
    //获取上传的图片地址
    onSuccess(val) {
      this.params.facade_img = val;
    },

    onSubmit(formName) {
      // console.log(this.params);
      // return;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //处理提交字段
          let params = {
            ...this.params,
            open_time: this.params.open_time.join("-"),
          };
          if (this.params.facade_img.length > 0) {
            params.facade_img = this.params.facade_img
              .map((item) => item.url)
              .join(",");
          }
          console.log(">>>>Params-------", params);
          // //删除不必传入的字段
          // delete params.userName;
          if (Object.keys(this.venueInfo).length != 0) {
            //编辑
            editVenue(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.$emit("handleClose", true);
              }
            });
          } else {
            //新增
            addVenue(params).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.$emit("handleClose", true);
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.$emit("handleClose");
    },
  },

  watch: {},
};
</script>
<style lang="scss" scoped>
.dialogBody {
  padding: 0 40px;
  /deep/.flexItem {
    display: flex;
    .el-form-item {
      flex: 1;
    }
    .el-input__inner {
      width: 260px;
    }
    .el-range-editor.el-input__inner {
      width: 290px;
    }
  }
  ::v-deep.el-input-group--append {
    .el-input__inner {
      border-right: none !important;
    }

    .el-input-group__append {
      background: transparent;
    }
  }
}
</style>
